<template>
  <view class="product-detail">
    <!-- 普通弹窗 -->
    <uni-popup ref="detailPopup" background-color="#fff" @change="change">
    	<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
        <view class="popup-content-top">
          <!-- <text class="text">复制地址</text> -->
          <text class="text"></text>
          <uni-icons type="closeempty" size="20" color="#dde2ec" @click="close"></uni-icons>
        </view>
        <!-- tab标签 -->
        <view class="product-detail-segment">
          <view class="uni-padding-wrap uni-common-mt">
          	<uni-segmented-control :current="current" :values="items" :style-type="styleType"
          		:active-color="activeColor" @clickItem="onClickItem" />
          </view>
        </view>
        <!-- tab标签切换页面 -->
        <view class="product-detail-swiper" v-if="current == 0">
          <productDetailSwiper :currentImageList="currentProductInfo.imageList"></productDetailSwiper>
        </view>
        <view class="product-detail-parameter" v-if="current == 0">
          <view class="product-detail-parameter-1">产品参数</view>
          <view class="product-detail-parameter-2">
            <text>品牌</text>
            <text>{{currentProductInfo.brand}}</text>
          </view>
          <view class="product-detail-parameter-2">
            <text>编号</text>
            <text>{{currentProductInfo.number}}</text>
          </view>
          <view class="product-detail-parameter-2">
            <text>产品型号</text>
            <text>{{currentProductInfo.category}}-{{currentProductInfo.direction || ''}}</text>
          </view>
        </view>
        
        <view class="product-detail-applicable-model" v-if="current == 1">
          <prodDetailApplicableModel :applicableModelList="applicableModelList">
          </prodDetailApplicableModel>
        </view>
<!--        <view class="popup-content-close">
          <button @click="close">关闭</button>
        </view> -->
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  import productDetailSwiper from '@/components/product-detail/swiper.vue'
  import prodDetailApplicableModel from '@/components/applicable-model/index.vue'
  import {applicableModel} from '@/utils/mock.js'
  import {getApplicableModel} from '@/api/parts/car.js'
  export default {
    options: {
    	styleIsolation: 'shared', // 解除样式隔离
    },
    components:{
      productDetailSwiper,prodDetailApplicableModel
    },
    props:{
      currentProductInfo:{
        type:Object,
        default:()=>{}
      }
    },
    data(){
      return {
        type: 'center',
        items: ['产品详情', '适配车型'],
        current: 0,
        activeColor: '#919191',
        styleType: 'button',
        applicableModelList:[],
      }
    },
    computed:{
      ...mapState('app',['productDetailSwitch'])
    },
    watch:{
      productDetailSwitch(newVal,oldVal){
        if(newVal){
          this.open()
          this.initDetailData()
        }else{
          this.close()
        }
      }
    },
    methods:{
      ...mapMutations('app',['COLSE_PRODUCT_DETAIL','OPEN_PRODUCT_DETAIL']),
      initData(){
        /* 这里请求初始化详情信息 */
        this.applicableModelList = applicableModel
      },
      initDetailData(){
        console.log("currentProductInfo",this.currentProductInfo)
        /* 这里请求初始化详情信息 */
        let data = {
          id:this.currentProductInfo.id
        }
        getApplicableModel(data).then(res=>{
          this.applicableModelList = res.data
        })
      },
      change(e) {
        if(e.show){
          this.OPEN_PRODUCT_DETAIL()
        }else{
          this.COLSE_PRODUCT_DETAIL()
        }
      	console.log('当前模式：' + e.type + ',状态：' + e.show);
      },
      open(type) {
      	this.$refs.detailPopup.open(type)
      },
      close(type) {
      	this.$refs.detailPopup.close()
      },
      toggle(type) {
      	this.type = type
      	// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
      	this.$refs.detailPopup.open(type)
      },
      onClickItem(e) {
      	if (this.current !== e.currentIndex) {
      		this.current = e.currentIndex
      	}
      },
    },
    created() {
      // this.initData()
    },
    mounted() {
      // this.initDetailData()
    }
  }
</script>

<style>
  @import url('../../static/style/eCatalog/product-detail.css');
</style>